<template>
	<div class="content">
		<div class="base">
			<Form inline class="fl">
				<Input type="text" placeholder="请输入充值编号" class="w200 m-r10" v-model.trim="tradeId"/>
				<Input type="text" placeholder="请输入充值会员ID" class="w200 m-r10" v-model.trim="ruuid"/>
				<DatePicker type="daterange" split-panels placeholder="请选择时间" class="w200 m-r10" format="yyyy-MM-dd HH:mm:ss" @on-change="getTime">
				</DatePicker>
				<!--<Button class="m-r10" v-on:click="getTimeGcollect(1)">今日</Button>
				<Button class="m-r10" v-on:click="getTimeGcollect(2)">近7天</Button>
				<Button class="m-r10" v-on:click="getTimeGcollect(3)">近30天</Button>-->
				<Button type="primary" v-on:click="getConditionQuery">查询</Button>
			</Form>
		</div>
		<fieldset>
			<legend>汇总</legend>
			<div>
				<table>
					<tbody>
						<tr>
							<td>累积充值积分:
								<span class="blue" v-text="collectList == null ? 0 : collectList">0</span>
							</td>
						</tr>
					</tbody>
				</table>
			</div>
		</fieldset>
		<Button class="daochu" type="primary" size="large" @click="exportData">
            <Icon type="ios-download-outline"></Icon>导出
		</Button>
		<Table stripe :columns="columns" :data="conditionQuery" ref="table"></Table>
		<Page :total="info" show-elevator :page-size="pageSize" show-total @on-change="cuctGetQuery"></Page>

		<Modal v-model="modal" title="充值会员详情" width='50%'>
			<Table height="200" class="m-t10" stripe :columns="columns1" :data='myUpList'></Table>
		</Modal>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				dataValue: [], // 时间段值
				conditionQuery: [], // 条件查询的结果
				info: null, // 总条数
				page: 1, // 页数
				pageSize: 20, // 每页多少条
				tradeId: '',
				ruuid: '',
				typeId: '',
				modal: false,
				myUpList: [],
				collectList: [],
				columns: [{
						title: '充值会员ID',
						key: 'receiveUuid',
						align: 'center',
						render: (h, params) => {
							return h(
								'div', {
									style: {
										cursor: 'pointer',
										color: '#2db7f5'
									},
									on: {
										click: () => {
											this.getUuid(params.row.receiveUuid);
										}
									}
								},
								params.row.receiveUuid
							)
						}
					},
					{
						title: '充值编号',
						key: 'tradeId',
						align: 'center'
					},
					{
						title: '充值数量',
						key: 'num',
						align: 'center',
					},
					{
						title: '操作人名称',
						key: 'rechargeName',
						align: 'center'
					},
					{
						title: '操作人手机号',
						key: 'rechargePhone',
						align: 'center',
						render: (h, params) => {
							return h('div', params.row.rechargePhone == null ? '#' : params.row.rechargePhone)
						}
					},
					{
						title: '备注',
						key: 'remark',
						align: 'center'
					},
					{
						title: '充值时间',
						key: 'createTime',
						align: 'center',
						sortable: true,
						render: (h, params) => {
							return h('div', params.row.createTime == null ? '#' : params.row.createTime)
						}
					}
				],
				columns1: [{
						title: '充值会员名称',
						align: 'center',
						key: 'nickName'
					},
					{
						title: '充值会员类型',
						align: 'center',
						key: 'typeId',
						render: (h, params) => {
							if(params.row.typeId == 1) {
								return h('div', '普通会员');
							} else if(params.row.typeId == 2) {
								return h('div', '广告主')
							}
						}
					},
					{
						title: '充值会员注册时间',
						align: 'center',
						key: 'createTime',
						sortable: true
					},
					{
						title: '他的上级ID',
						align: 'center',
						key: 'puuid'
					}
				]
			}
		},
		mounted() {
			this.$Message.config({ // 配置弹窗的位置
				top: 250
			});
			this.getQuery(); // 充值列表查询
			this.getCollect(); // 充值列表的汇总
		},
		methods: {
			getTime(daterange) {
				this.dataValue = daterange
			},
			exportData() { // 导出
				this.$refs.table.exportCsv({
					filename: '充值列表'
				})
			},
			getQuery() { // 充值列表查询
				let token = localStorage.getItem("mytoken");
				let params = this.qs.stringify({
					pn: this.page, // 当前页【可选，默认1】
					size: this.pageSize, // 每页记录数【可选，默认20】
					tradeId: '',
					ruuid: '',
					typeId: '',
					startTime: '2000-12-30 00:00:00', // 起始日期
					endTime: '2200-12-30 00:00:00' // 结束日期
				})
				this.axios.post('order/topup', params, {
					headers: {
						Authorization: 'bearer ' + token
					}
				}).then(res => {
					if(res.data.code == 8008) {
						this.conditionQuery = res.data.data.rechargeList;
						this.info = res.data.data.total;
					} else if(res.data.code == 5501) {
						this.$Message.info(res.data.message);
						localStorage.removeItem('mytoken');
						this.$router.push({
							name: 'login'
						})
					}
				})
			},
			cuctGetQuery(page) { // 充值列表分页查询
				let token = localStorage.getItem("mytoken");
				let params = this.qs.stringify({
					pn: page, // 当前页【可选，默认1】
					size: this.pageSize, // 每页记录数【可选，默认20】
					tradeId: '',
					ruuid: '',
					typeId: '',
					startTime: '2000-12-30 00:00:00', // 起始日期
					endTime: '2200-12-30 00:00:00' // 结束日期
				})
				this.axios.post('order/topup', params, {
					headers: {
						Authorization: 'bearer ' + token
					}
				}).then(res => {
					if(res.data.code == 8008) {
						this.conditionQuery = res.data.data.rechargeList;
					} else if(res.data.code == 5501) {
						this.$Message.info(res.data.message);
						localStorage.removeItem('mytoken');
						this.$router.push({
							name: 'login'
						})
					}
				})
			},
			getConditionQuery() { // 充值列表条件查询
				let token = localStorage.getItem("mytoken");
				let params = this.qs.stringify({
					pn: this.page, // 当前页【可选，默认1】
					size: this.pageSize, // 每页记录数【可选，默认20】
					tradeId: this.tradeId,
					ruuid: this.ruuid,
					typeId: '',
					startTime: this.dataValue[0] == '' ? '2000-12-30 00:00:00' : this.dataValue[0], // 起始日期
					endTime: this.dataValue[1] == '' ? '2200-12-30 00:00:00' : this.dataValue[1] // 结束日期
				})
				this.axios.post('order/topup', params, {
					headers: {
						Authorization: 'bearer ' + token
					}
				}).then(res => {
					if(res.data.code == 8008 || res.data.code == 4004) {
						this.conditionQuery = res.data.data.rechargeList;
						this.info = res.data.data.total;
					} else if(res.data.code == 5501) {
						this.$Message.info(res.data.message);
						localStorage.removeItem('mytoken');
						this.$router.push({
							name: 'login'
						})
					}
				})
			},
			getUuid(id) {
				let token = localStorage.getItem('mytoken')
				this.modal = true;
				this.axios.get('order/Topmessage/' + id, {
					headers: {
						Authorization: 'bearer ' + token
					}
				}).then(res => {
					if(res.data.code == 8008) {
						this.myUpList = res.data.data.topMessageVOList;
					} else if(res.data.code == 4004) {
						this.$Message.info(res.data.message);
					} else if(res.data.code == 5501) {
						this.$Message.info(res.data.message);
						localStorage.removeItem('mytoken');
						this.$router.push({
							name: 'login'
						})
					}
				})
			},
			getCollect() {
				let token = localStorage.getItem('mytoken')
				this.axios.get('order/topupcollect', {
					headers: {
						Authorization: 'bearer ' + token
					}
				}).then(res => {
					if(res.data.code == 8008) {
						this.collectList = res.data.data.numSum;
					} else if(res.data.code == 4004) {
						this.$Message.info(res.data.message);
					} else if(res.data.code == 5501) {
						this.$Message.info(res.data.message);
						localStorage.removeItem('mytoken');
						this.$router.push({
							name: 'login'
						})
					}
				})
			},
//			getTimeGcollect(index) {
//				let token = localStorage.getItem("mytoken");
//				let params = this.qs.stringify({
//					pn: this.page, // 当前页【可选，默认1】
//					size: this.pageSize, // 每页记录数【可选，默认20】
//					tradeId: this.tradeId,
//					ruuid: this.ruuid,
//					typeId: index,
//					startTime: this.dataValue[0] == '' ? '2000-12-30 00:00:00' : this.dataValue[0], // 起始日期
//					endTime: this.dataValue[1] == '' ? '2200-12-30 00:00:00' : this.dataValue[1] // 结束日期
//				})
//				this.axios.post('order/topup', params, {
//					headers: {
//						Authorization: "bearer " + token
//					}
//				}).then(res => {
//					if(res.data.code == 8008) {
//						this.timeGcollect = res.data.data.rechargeList;
//					} else if(res.data.code == 4004) {
//						this.$Message.info(res.data.message);
//					} else if(res.data.code == 5501) {
//						this.$Message.info(res.data.message);
//						localStorage.removeItem("mytoken");
//						this.$router.push({
//							name: 'login'
//						})
//					}
//				})
//			}
		}
	}
</script>

<style>

</style>